<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<!--引入本地 element-ui 的样式，-->
	<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
	<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
	<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

	<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>

	<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<title>缴费充值</title>
</head>
<body>
<div id="app">
	<h2>缴费充值</h2>
	<div class="contents">
		<label >表具号：</label>
		<p>{{formdata.bjh}}</p>
		<!-- <input type="text" name="" id="" value="00000064938" class="input" > -->
	</div>
	<div class="contents">
		<label >姓名：</label>
		<p>{{formdata.name}}</p>
	</div>
	<div class="contents">
		<label >地址：</label>
		<p>{{formdata.xxdz}}</p>
	</div>
	<div class="contents">
		<label >余额：</label>
		<p>{{formdata.balance}}元</p>
	</div>

	<div class="contents">
		<label >充值金额：</label>
		<input type="number" name="" v-model="fee"  placeholder="请输入充值金额">
	</div>

	<div class="contents" style="margin-top: 16px;">
		<label >支付方式：</label>
		<div>
			<el-radio v-model="zffs" label="6"  >微信支付</el-radio>
			<el-radio v-model="zffs" label="7"  >农行快E付</el-radio>
		</div>

	</div>

	<div class="btns">
		<button class="btn" @click="chongzhi">充值</button>
		<button class="btn">重置</button>
	</div>
</div>
</body>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			zffs: '6',
			formdata:{},
			fee:100
		},
		async created() {
			localStorage.setItem("user", JSON.stringify({"org_id":"baicheng"}));
			// this.initWxConfig();
			await this.loginOpenid();
			this.loadData();
		},
		methods: {
			//登录
			async loginOpenid() {
				this.parmsData = getParams();
				if (this.parmsData.code != "" && this.parmsData.code != undefined) {
					const res = await postWebCustom(getTableId("1942"), {code: this.parmsData.code});
					if (res.code == 0) {
						this.$message(res.msg);
						return;
					}
					if (res.data.openid) {
						localStorage.setItem("token", res.data.openid);
					}
				} else {
					let token = localStorage.getItem("token");
					if (null == token) {
						let url = wwwurl + "/admin/html/module/baicheng/payRecharge.html";
						window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx5aba54c8ab15d29d&redirect_uri=" + url + "&response_type=code&scope=snsapi_base&#wechat_redirect";
					}
				}
			},
			//调用微信接口初始化
			async initWxConfig(){
				let index = loading(this);
				const res = await postWebCustom(getTableId("1949"),{url:wwwurl+"/admin/html/module/baicheng/payRecharge.html"});
				index.close();
				if(res.code == 0){
					this.$message(res.msg);
					return;
				}
				wx.config({
					debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
					appId: res.data.appid, // 必填，公众号的唯一标识
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.noncestr, // 必填，生成签名的随机串
					signature: res.data.signature,// 必填，签名
					jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
				});
			},
			async chongzhi(){
				let index = loading(this);
				const res = await postWebCustom(getTableId("1947"),{fee:""+this.fee,zffs:""+this.zffs});
				index.close();
				if(res.code == 0){
					this.$message(res.msg);
					return;
				}
				window.location.href = res.data;
				/*WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
							"appId":res.data.appId,     //公众号ID，由商户传入
							"timeStamp":res.data.timeStamp,         //时间戳，自1970年以来的秒数
							"nonceStr":res.data.nonceStr, //随机串
							"package":res.data.package,
							"signType":"MD5",         //微信签名方式：
							"paySign":res.data.sign //微信签名
						},
					function(res){
						if(res.err_msg == "get_brand_wcpay_request:ok" ){
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							window.location.href = "/admin/html/module/baicheng/tradeRecords.html";
						}
					});*/
			},
			async loadData(){
				const res = await postWebCustom(getTableId("1950"),{});
				this.formdata = res.data;
			},
		},

	})
</script>
<style type="text/css">
	body {
		margin: 0;
		padding: 10px;
	}

	#app {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.contents {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 80px 1fr);
	}

	.contents label {
		width: 80px;
		line-height: 45px;
		/* text-align: right; */
	}

	.contents p {
		line-height: 14px;
	}

	.contents input {
		width: 100%;
		height: 45px;
		padding: 10px;
		border-color: #ddd;
		border-radius: 8px;
		border-style: solid;
		outline: none;
		font-size: 16px;
	}

	.contents .input {
		border: none;
	}

	.btns {
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}

	.btn {
		background-color: #409eff;
		color: #fff;
		margin: 0 20px;
		padding: 10px 30px;
		border: none;
		border-radius: 4px;
	}
</style>
</html>
